<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>btn</title>
    <link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css">
</head>
<style>
    body {
        max-width: 400px;
        margin: 0 auto;
    }
</style>
<body>


<div class="panel panel-default">
    <div class="panel-heading">
        用户统计
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet assumenda distinctio, explicabo fugit in iure laborum minus molestias, nesciunt nulla officia quam quo, ut velit veniam voluptatibus. Quae, voluptas.
    </div>
    <div class="panel-footer">
       <div class="small">
           数据更新于5秒前
       </div>
    </div>
</div>
l
<div class="panel panel-success">
    <div class="panel-heading">
        <div class="panel-title">
            用户统计
        </div>
        <div class="small">
            女性用户统计
        </div>
    </div>
    <div class="panel-body">
        <div class="breadcrumb">
            <li><a href="#">首页</a> </li>
            <li><a href="#">文章</a> </li>
            <li class="active">hi <span class="badge small">50k</span></li>
        </div>
        <h2>hi</h2>
        <div>
            <span class="label label-success">面选</span>
            <span class="label label-info">面选</span>
            <span class="label label-default">面选</span>
            l
        </div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid aperiam, aspernatur beatae
            commodi culpa dolorum illum necessitatibus neque nisi nobis obcaecati optio pariatur! Amet dolor dolorem
            maiores numquam unde.
        </div>
        <div>A accusamus ad at consequatur culpa dolor eius eveniet expedita fugiat in ipsum laboriosam, laudantium modi
            nihil non numquam odio odit quas quos sapiente soluta sunt temporibus totam veniam vitae!
        </div>
        <div>Accusantium, amet consectetur nulla obcaecati officiis sunt! Consequuntur corporis culpa ea libero quam
            temporibus tenetur unde vel. Ab cum distinctio dolorum eaque libero quaerat quibusdam? Ab consequuntur
            dolore exercitationem necessitatibus?
        </div>
        <div>Cumque cupiditate esse incidunt ipsam odit porro veritatis voluptatem. Atque enim laborum officiis
            sapiente. Ad architecto cupiditate deserunt et fugit inventore nihil placeat, quas sequi tempora! Culpa
            dolorum pariatur sed.
        </div>
        <button class="btn btn-primary">赞 <span class="badge">5</span></button>
    </div>
</div>


<div class="panel panel-primary">
    <div class="panel-heading">
        用户统计
    </div>
    <div class="panel-body">
        dfdfkdjfkdsjfdskfjdsf
        dfds
        fdsfd
        sfds
        fdsfd
        sfdf
    </div>
</div>
</body>
</html>